<template>
  <div class="chooseList">
    <div class="info">
      <div>已选课程：{{ chooseList.length }}</div>
      <!-- <div>未完成任务数: {{ unFinishTask }}</div> -->
      <!-- <div>完成任务数：{{ finishTask }}</div> -->
    </div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item
          :title="item.name"
          :name="`${index}`"
          v-for="(item, index) in chooseList"
          :key="index"
        >
          <img
            :src="require('@/assets/images/1552544248916310.jpg')"
            class="courseImg"
          />
          <div>课程编号：{{ item.currNo }}</div>
          <div>课程描述：{{ item.name }}</div>
          <div>课程指南：课程指南</div>
          <div>选课时间：2021-03-01 00:00:00</div>
          <!-- <div>在学任务数：{{ item.choose.taskCommitJson | filterLearing }}</div> -->
          <!-- <div>未学任务数：{{ item.choose.taskCommitJson | filterunLearn }}</div> -->
          <el-button type="primary" @click="handelTostudy(item)"
            >前往学习</el-button
          >
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { getChooselist } from "@/request/courses";
import tool from "@/util/tool";
import { mapState } from "vuex";
export default {
  data() {
    return {
      chooseList: [],
      activeNames: [],
    };
  },

  computed: {
    unFinishTask() {
      // let count = 0
      // this.chooseList.forEach((item) => {
      //   item.choose.taskCommitJson.forEach((titem) => {
      //     if (titem.state == type.chooseType[0]) {
      //       count++
      //     }
      //   })
      // })
      return false;
    },
    finishTask() {
      // let count = 0
      // this.chooseList.forEach((item) => {
      //   item.choose.taskCommitJson.forEach((titem) => {
      //     if (titem.state == type.chooseType[1]) {
      //       count++
      //     }
      //   })
      // })
      return false;
    },
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  filters: {
    filterTime(val) {
      return tool.renderTime(val);
    },
    filterLearing(val) {
      const count = val.filter((item) => item.state == "在学");
      return count.length;
    },
    filterunLearn(val) {
      const count = val.filter((item) => item.state == "未学");
      return count.length;
    },
  },
  created() {
    this.fetchChoose({ userID: this.userInfo.userID });
  },
  methods: {
    // 获取已选课程列表
    fetchChoose(params) {
      getChooselist(params).then((data) => {
        if (data) {
          data.map((item) => (item.name = item.name.split("_")[0]));
          this.chooseList = data;
        }
      });
    },
    handelTostudy(item) {
      this.$router.push({
        name: "Curr",
        // query: { courseId: item.courseID, currNo: item.currNo },
        params: {
          id: item.currNo,
        },
      });
    },
  },
};
</script>

<style lang="stylus">
.chooseList {
  margin: 0 auto;
  max-width: 1200px;

  .info {
    display: flex;
    justify-content: space-around;
  }

  .courseImg {
    max-width: 300px;
  }
}
</style>